<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="rili.js"></script>
		<style>
			#tab table{
				background: aliceblue;
				border: 2px solid tan;
			}
			
			#tab  td {
				width: 50px;
				height: 40px;
				text-align: center;
			}
			
			.trs1{
				font-size: 18px;
				font-weight: bold;
			}
			.active{
				background-color: red
			}
		</style>
	</head>

	<body >
		<div id="tab"></div>

		<script>
			var time = new Date();
			var year = time.getFullYear();
			var month = (time.getMonth() + 1);
			window.onkeydown = function() {
				time.getDate().className="active"
				switch(event.keyCode) {
					
					case 37:
						year--;
						break;
					case 38:
						month++;
						if(month == 13) {
							month = 1;
							year++;
						}
						break;
					case 39:
						year++;
						break;
					case 40:
						month--;
						if(month == 0) {
							month = 12;
							year--;
						}
						break;
				}
				
				document.getElementById("tab").innerHTML = outputCalendar(year, month);
			}

			document.getElementById("tab").innerHTML = outputCalendar(year, month);
		</script>
	</body>

</html>